<template>
  <div>
    <el-container>
      <el-header class="header" style="padding: 0;">
        <el-form :inline="true">
          <el-form-item label="公众号">
            <el-select v-model="publicNumberName" placeholder="请选择公众号">
              <el-option v-if="userRole === 'ADMIN'" label="全部" value="0"></el-option>
              <el-option v-for="(item, index) in publicArr" :label="item.name" :value="item.accountId" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="keyword">
            <el-date-picker
              v-model="value4"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions2"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="search" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </el-header>
    </el-container>
    <el-container>
      <div id="main" :style="{width: '100%', height: '300px'}"></div>
    </el-container>
    <el-container>
      <div class="line"></div>
    </el-container>
    <el-container>
      <div id="main1" :style="{width: '100%', height: '350px'}"></div>
    </el-container>
  </div>
</template>

<script>
  /* eslint-disable */

  import echart from 'echarts';
  import service from '../../../service/count';
  import CONSTANT from '../../../constant/common';
  import cookie from '../../../lib/cookie';

  export default {
    name: 'propellingMovementNum',
    data() {
      return {
        userRole: cookie(CONSTANT.COOKIE_USER_ROLE),
        publicNumberName: '',
        publicArr: [],
        lineTime: [],
        lineGuanTime: [],
        lineQuTime: [],
        lineNum: [],
        lineGuanNum: {},
        lineQuNum: {},
        pieValur: [],
        pieName: [],
        pieShow: {},
        value4: '',
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          }],
        },
      };
    },
    mounted() {
      this.getAuthorizerInfo();
    },
    components: {
    },
    computed: {
      publicAccountNickname() {
        const localWoa = localStorage.getItem(CONSTANT.STORAGE_LOCAL_WOA) ?
          JSON.parse(localStorage.getItem(CONSTANT.STORAGE_LOCAL_WOA)) : {};
          return this.$store.state.woa.currentWoa.publicAccountNickname || localWoa.publicAccountNickname;
      }
    },
    methods: {
      search() {
        const fromtime = this.value4 ? this.value4[0] : '';
        const totime = this.value4 ? this.value4[1] : '';
        const dataObj =
          { fromTime: fromtime, toTime: totime, accountId: this.publicNumberName };
        this.lineInit(dataObj);
      },
      lineInit(data) {
        const that = this;
        that.lineTime = [];
        that.lineNum = [];
        that.lineGuanTime = [];
        that.lineGuanNum = {};
        that.lineQuTime = [];
        that.lineQuNum = {};
        const myChart = echart.init(document.getElementById('main'), 'light');
        const myChart1 = echart.init(document.getElementById('main1'), 'light');
        service.getDayPlay(data).then((res) => {
          res[0].map((item) => {
            that.lineTime.push(item.statDate);
            that.lineNum.push(item.dau);
            return true;
          });
          res[1].map((item) => {
            that.lineGuanTime.push(item.statDate);
            that.lineGuanNum[item.statDate] = item.subscribe_user;
            return true;
          });
          res[2].map((item) => {
            that.lineQuTime.push(item.statDate);
            that.lineQuNum[item.statDate] = item.unsubscribe_user;
            return true;
          });
          const newTime = this.newArr(that.lineGuanTime, that.lineQuTime);
          const newGuanNum = [];
          const newQuNum = [];
          newTime.map((item) => {
            // 添加关注人数
            if (that.lineGuanNum[item]) {
              newGuanNum.push(that.lineGuanNum[item]);
            } else {
              newGuanNum.push(0);
            }
            // 添加取关人数
            if (that.lineQuNum[item]) {
              newQuNum.push(that.lineQuNum[item]);
            } else {
              newQuNum.push(0);
            }
            return true;
          });
          myChart.setOption({
            title: {
              text: '日活人数',
              x: 'left',
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: that.lineTime,
              name: '时间',
            },
            yAxis: {
              type: 'value',
              name: '总人数',
            },
            series: [{
              name: '人数',
              type: 'line',
              data: that.lineNum,
            }],
          });
          myChart1.setOption({
            title: {
              text: '关注分析图',
              x: 'left',
            },
            legend: {},
            tooltip: {
              trigger: 'axis',
              // showContent: false,
            },
            dataset: {
              source: [
                ['时间', ...newTime],
                ['关注人数', ...newGuanNum],
                ['取关人数', ...newQuNum],
              ],
            },
            xAxis: { type: 'category' },
            yAxis: { gridIndex: 0 },
            series: [
              { type: 'line', seriesLayoutBy: 'row', color: ['#67C23A'] },
              { type: 'line', seriesLayoutBy: 'row', color: ['#F56C6C'] },
            ],
          });
        });
      },
      getAuthorizerInfo() {
        service.getAuthorizerInfo().then((res) => {
          this.publicArr = res;
          if(this.userRole !== 'ADMIN'){
            this.publicNumberName = (res.filter( item => item.name === this.publicAccountNickname ))[0].accountId;
          }
          this.search()
        });
      },
      // 数组合并并去重
      newArr(arr1, arr2) {
        const finalTime = [];
        const newTime = arr1.concat(arr2);
        newTime.map((item) => {
          if (finalTime.indexOf(item) === -1) {
            finalTime.push(item);
          }
          return true;
        });
        return finalTime;
      },
    },
  };
</script>

<style scoped>
  .line{
    height: 1px;
    width: 100%;
    margin: 30px auto;
    background: #ccc;
  }
</style>
